<template>
  <div class="common-layout">
    <el-container>
      <!-- 菜单栏 -->
      <MenuBar :isCollapse="isCollapse"></MenuBar>
      <el-container>
        <el-header>
          <!-- 面包屑 -->
          <div class="headers">
            <BreadCrumbs @goods=show></BreadCrumbs>
            <div class="opp">
              <span><FullScreen class="lefts"></FullScreen></span>
              <el-divider direction="vertical" />
              <span><Lcons class="china"></Lcons></span>
              <el-divider direction="vertical" />
              <span><ThemPicker></ThemPicker></span>
              <el-divider direction="vertical" />
              <Users class="bottom"></Users>
            </div>
          </div>  
          <!-- 标签页    -->
          <TabPage></TabPage>
                   
        </el-header>
        <el-main>
         
        <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import BreadCrumbs from "@/Subassembly/BreadCrumbs";
import MenuBar from "@/Subassembly/MenuBar";
import TabPage from "@/Subassembly/TabPage";
import FullScreen from "@/Subassembly/FullScreen";
import Lcons from "@/Subassembly/Lcons";
import ThemPicker from "@/Subassembly/ThemPicker";
import Users from "@/Subassembly/Users";
export default {
  components: {
    BreadCrumbs,
    MenuBar,
    TabPage,
    FullScreen,
    Lcons,
    ThemPicker,
    Users
  },
  data() {
    return {
      isCollapse: true, //菜单栏默认展开
    };
  },
    methods: {
      show(event){
        console.log(event);
        this.isCollapse = event
      },
  },
};
</script>
<style lang="less" scoped>
.common-layout{
  height: 100%;
    .el-container {
      background-color: #545C64;
  height: 100%;
  .el-header {
    background-color: #fff;
    height: 90px;
    padding: 0px; 
      .headers{
        display: flex;
        .lefts{
          width: 24px;
          height: 40px;
          display: inline-block;
          vertical-align: middle;
          margin-top: 7px;
        }
        .china{
          width: 24px;
          height: 40px;
          display: inline-block;
          vertical-align: middle;
          margin-top: 7px;
        }
        .bottom{
          width: 40px;
          display: inline-block;
          position: absolute;
          top: 6px;
        }
        .opp{
          position: relative;
        }       
      }

  }
  //右侧导航
  .el-main {
    height: 100%;
    background-color: #fff;
    padding: 0px;
  }
}
}

</style>
